<template>
  <div class="about">
    <div id="box_1">
      <input type="text" id="" value="" v-model="inputValue" />
      <input type="text" id="" value="" v-model="grossValue" />
      <div class="butt">
        <button
          type="button"
          class="wid_30"
          style="color: #fff; background-color: red"
          v-on:click="dele()"
        >
          AC
        </button>
        <button type="button" class="wid_30" v-on:click="add('+')">+</button>
        <button type="button" class="wid_30" v-on:click="add('-')">-</button>
        <button type="button" class="wid_30" v-on:click="add('x')">x</button>
        <button type="button" class="wid_30" v-on:click="add(1)">1</button>
        <button type="button" class="wid_30" v-on:click="add(2)">2</button>
        <button type="button" class="wid_30" v-on:click="add(3)">3</button>
        <button type="button" class="wid_30" v-on:click="add('/')">/</button>
        <button type="button" class="wid_30" v-on:click="add(4)">4</button>
        <button type="button" class="wid_30" v-on:click="add(5)">5</button>
        <button type="button" class="wid_30" v-on:click="add(6)">6</button>
        <button type="button" class="wid_30" v-on:click="add('.')">.</button>
        <button type="button" class="wid_30" v-on:click="add(7)">7</button>
        <button type="button" class="wid_30" v-on:click="add(8)">8</button>
        <button type="button" class="wid_30" v-on:click="add(9)">9</button>
        <button type="button" class="wid_30" v-on:click="add(0)">0</button>
        <button
          type="button"
          style="width: 134px; border: 0"
          v-on:click="evaluation()"
        >
          =
        </button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  // el: "#box_1",
  data() {
    return {
      inputValue: "",
      result: [],
      cache: 0,
      grossValue: "",
    };
  },
  methods: {
    add: function (x) {
      this.inputValue = this.inputValue + x;
    },
    dele: function () {
      this.inputValue = "";
      this.grossValue = "";
    },

    evaluation: function () {
      //将输入框中的值（字符串）拆解并存入数组中
      for (var i = 0; i < this.inputValue.length; i++) {
        this.result.push(this.inputValue.charAt(i));
      }
      this.calculation(); //调用运算方法
      this.result[0] = this.result[0].toFixed(9); //保留9位小数
      this.grossValue = this.result[0];
      this.result = []; //归零
    },

    calculation: function () {
      //将多位数（字符串单个字符）转化为整体  "5""6" ==> "56"
      for (var i = 1; i < this.result.length; i++) {
        if (
          this.result[i] != "+" &&
          this.result[i] != "-" &&
          this.result[i] != "x" &&
          this.result[i] != "/"
        ) {
          if (
            this.result[i - 1] != "+" &&
            this.result[i - 1] != "-" &&
            this.result[i - 1] != "x" &&
            this.result[i - 1] != "/"
          ) {
            this.cache = this.result[i - 1] + this.result[i]; //合并多位数 "5""6" ==> "56"
            this.result[i - 1] = this.cache; //将整理过的数放入数组中
            this.result.splice(i, 1); //整理已经整合过的数
            this.calculation(); //再次调用自身以便检查是否有遗漏
          }
        }
      }
      //乘法运算
      for (var i = 0; i < this.result.length; i++) {
        if (this.result[i] === "x") {
          this.cache = this.result[i - 1] * this.result[i + 1];
          this.result[i - 1] = this.cache;
          this.result.splice(i, 2); //删掉数组中已经运算过的数与运算符号
          this.calculation();
        }
      }
      //除法运算
      for (var i = 0; i < this.result.length; i++) {
        if (this.result[i] === "/") {
          this.cache = this.result[i - 1] / this.result[i + 1];
          this.result[i - 1] = this.cache;
          this.result.splice(i, 2);
          this.calculation();
        }
      }
      //加法运算
      for (var i = 0; i < this.result.length; i++) {
        if (this.result[i] === "+") {
          this.cache = this.result[i - 1] * 1 + this.result[i + 1] * 1; //乘 1 是为了在加减法中将字符型转为数值型运算，否则将会是级联
          this.result[i - 1] = this.cache;
          this.result.splice(i, 2);
          this.calculation();
        }
      }
      //减法运算
      for (var i = 0; i < this.result.length; i++) {
        if (this.result[i] === "-") {
          this.cache = this.result[i - 1] * 1 - this.result[i + 1] * 1;
          this.result[i - 1] = this.cache;
          this.result.splice(i, 2);
          this.calculation();
        }
      }
    },
  },
};
</script>
<style lang="scss">
#box_1 {
  margin: 100px auto;
  width: 140px;
}
#box_1 input {
  width: 130px;
}
.butt {
  width: 140px;
}
.wid_30 {
  width: 30px;
  border: 0;
  font-size: 16px;
}
</style>
